<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script src="../js/vue.js"></script>
    <script src="../js/jquery-1.11.3.min.js"></script>
    <title>图片资源管理</title>
    <link href="../css/adminImg.css" rel="stylesheet">
</head>
<body>
   <div id="app">
		<section class="adminImg-content">
			<div class="adminImg-tabbar">
                <span :class="{'activeTabbar':currentTabbar==1}" @click="chooseTab(1)"><img src="../img/adminImg.png"  /> 图片库</span>
                <span :class="{'activeTabbar':currentTabbar==2}" @click="chooseTab(2)"><img src="../img/adminDel.png"  /> 回收站</span>
            </div>
            <div class="adminImg-operation">
                <section @click="showOperation" :class="{'noActiveOperation':!isOperation}" id="moniSelect">
                   <span  style="padding-left:10px;color:#FFFFFF;">选择操作</span>
                    <div class="operation-imgBox" >
                        <img src="../img/operationUp.png" />
                        <img src="../img/operationDown.png" />
                    </div>
                    <ul v-show="isShowOperation">
                        <li @click="delteImg">删除图片</li>
                        <li v-if="currentTabbar==2">还原图片</li>
                        <li v-if="currentTabbar==1" @click="addSourceDialog">添加到免费资源库</li>
                    </ul>
                </section>
            </div>
            <div class="adminImg-imgPart">
                <section class="imgPart-list" :class="{'chooseImgAct':item.isChoose&&item.isChoose==true}" v-for="(item,index) in list" :key="index">
                   <div class="imgPart-list-imgBox">
                       <img :src="item.img" @click="chooseList(item,index)" />
                       <div class="imgPart-btn">
                           <span>
                              <img src="../img/adminSearch.png" @click="openImgDialog(index)" />
                           </span>
                           <span @click="editName(index)"><img src="../img/adminEdit.png" style="width:26px;height:20px;" /></span>
                           <span @click="delet(index)"><img src="../img/adminDelete.png" /></span>
                           
                       </div>
                       <div class="seleted" v-if="item.isChoose&&item.isChoose==true">
                           <section></section>
                           <img src="../img/adminImgSeleted.png" />
                       </div>
                       <div class="zumaA">
                           <img style="width:68px;height:22px" class="zumaA1" src="../img/adminZuma.png" />
                           <img src="../img/zumaLogo.png" class="zumaA2" />
                        </div>
                   </div> 
                   <div class="imgPart-list-bottom">
                        <div class="imgPart-list-imgName"  v-show="editIndex!=index" @click="editName(index)">
                                <span>{{item.name}}</span>
                                <img src="../img/yinpinDialog2.png" class="weixinImg" />
                        </div> 
                        <div class="imgPart-list-imgNameInput" v-show="editIndex==index">
                                <input v-model="item.name" :class="{'error-box-input':editIndex==index&&(isNameOut||isNameSame)}" @input="inputImgName($event)" @blur="blurInputName(index)" ref="inputs" :id="'input'+index" />
                                <section class="error-box">
                                      <div class="error-box-des" v-show="editIndex==index&&(isNameOut||isNameSame)">
                                         <img src="../img/authList01.png"  />
                                         <p class="error-box-des-one" v-show="isNameSame&&editIndex==index">  ※ 禁止重名！
                                                <i class="arrow arrow_out"></i>
                                                <i class="arrow arrow_in"></i>
                                         </p>
                                         <p class="error-box-des-two" v-show="isNameOut&&editIndex==index">    ※ 请填写不超过25个汉字或50个字符！
                                                <i class="arrow arrow_out"></i>
                                                <i class="arrow arrow_in"></i>
                                         </p>
                                      </div>
                                        
                                </section>
                                
                        </div>
                   </div>
                   
                </section>
            </div>
        </section>
        
        <section class="adminImg-imgDialog" v-if="imgDialogShow">
            <div class="imgDialog-content">
                <section class="" style="width:100%;height:100%;position:relative;">
                    <img src="../img/leftArrow.png" @click="prePageGo" class="leftArrow" />
                    <img src="../img/rightArrow.png"  @click="nextPageGo" class="rightArrow" />
                    <img src="../img/imgDialogClose.png" @click="closeIcon" style="background:#efefef;border-radius:50%;" class="closeIcon" />
                    <div class="imgPart">
                        <img :src="nowImgObj.img" />
                    </div>
                    <div class="imgDes">
                        <div> <span>文件名:</span> {{nowImgObj.name}}</div>
                        <div> <span>资源类型:</span>{{nowImgObj.sourceType}}</div>
                        <div> <span>上传站点:</span> {{nowImgObj.updateShop}}   &nbsp;&nbsp;&nbsp;&nbsp; {{nowImgObj.updateShopName}}   &nbsp;&nbsp;&nbsp;&nbsp;上传会员:&nbsp;&nbsp;&nbsp;{{nowImgObj.updeteVip}}   &nbsp;&nbsp;&nbsp;&nbsp;{{nowImgObj.updeteVipName}}</div>
                        <div> <span>上传时间:</span> {{nowImgObj.updateTime}}</div>
                    </div>
                </section>
            </div>
        </section>

        <section class="addSourceDialog" v-if="addSourceDialogShow">
            <div class="sourceDialog-content">
                <section class="sourceDialog-title">
                    添加到免费资源图片资源库
                    <img src="../img/sourceClose.png" @click="closeSourceDialog" />
                </section>
                <section class="sourceDialog-scrollPart">
                    <div class="scrollPart-list" v-for="(item,index) in sourceDialogList">
                        <label>
                            <span style="width:69px;border-right:1px solid #C9C9C9;text-align:center"> <input type="checkBox" /> </span>
                            <span>{{item.name}}</span>
                       </label>
                    </div>
                </section>
                <section class="sourceDialog-bottom">
                    <span @click="closeSourceDialog">取消</span>
                    <span style="background:#0C6951;color:#fff;margin-left:20px">确认</span>
                </section>
            </div>
        </section>
   </div>
</body>
<script>

	new Vue({
		el:'#app',
		data:{
            currentTabbar:1,
          
            listHave:[
            {id:'0','img':'../img/u382.png',name:'图片1',sourceType:'站点资源库',updateShop:'KDHJJJEJEN',updateShopName:'上海名腾科技有限公司',updeteVip:'AA1231233135454',updeteVipName:'会员昵称昵称',updateTime:'2017-01-45'},
                {id:'1','img':'../img/POIdialog.png',name:'图片2',sourceType:'族蚂资源库',updateShop:'KDHJJJEJEN',updateShopName:'上海名腾科技有限公司',updeteVip:'AA1231233135454',updeteVipName:'会员昵称昵称',updateTime:'2017-01-45'},
                {id:'2','img':'../img/u150.png',name:'图片2',sourceType:'站点资源库',updateShop:'KDHJJJEJEN',updateShopName:'上海名腾科技有限公司',updeteVip:'AA1231233135454',updeteVipName:'会员昵称昵称',updateTime:'2017-01-45'},
                {id:'3','img':'../img/u382.png',name:'图片1',sourceType:'站点资源库',updateShop:'KDHJJJEJEN',updateShopName:'上海名腾科技有限公司',updeteVip:'AA1231233135454',updeteVipName:'会员昵称昵称',updateTime:'2017-01-45'},
                {id:'4','img':'../img/POIdialog.png',name:'图片2',sourceType:'族蚂资源库',updateShop:'KDHJJJEJEN',updateShopName:'上海名腾科技有限公司',updeteVip:'AA1231233135454',updeteVipName:'会员昵称昵称',updateTime:'2017-01-45'},
                {id:'5','img':'../img/u150.png',name:'图片2',sourceType:'站点资源库',updateShop:'KDHJJJEJEN',updateShopName:'上海名腾科技有限公司',updeteVip:'AA1231233135454',updeteVipName:'会员昵称昵称',updateTime:'2017-01-45'},
                {id:'6','img':'../img/u382.png',name:'图片1',sourceType:'站点资源库',updateShop:'KDHJJJEJEN',updateShopName:'上海名腾科技有限公司',updeteVip:'AA1231233135454',updeteVipName:'会员昵称昵称',updateTime:'2017-01-45'},
                {id:'7','img':'../img/POIdialog.png',name:'图片2',sourceType:'族蚂资源库',updateShop:'KDHJJJEJEN',updateShopName:'上海名腾科技有限公司',updeteVip:'AA1231233135454',updeteVipName:'会员昵称昵称',updateTime:'2017-01-45'},
                {id:'8','img':'../img/u150.png',name:'图片2',sourceType:'站点资源库',updateShop:'KDHJJJEJEN',updateShopName:'上海名腾科技有限公司',updeteVip:'AA1231233135454',updeteVipName:'会员昵称昵称',updateTime:'2017-01-45'},
                {id:'9','img':'../img/u382.png',name:'图片1',sourceType:'站点资源库',updateShop:'KDHJJJEJEN',updateShopName:'上海名腾科技有限公司',updeteVip:'AA1231233135454',updeteVipName:'会员昵称昵称',updateTime:'2017-01-45'},
                {id:'10','img':'../img/POIdialog.png',name:'图片2',sourceType:'族蚂资源库',updateShop:'KDHJJJEJEN',updateShopName:'上海名腾科技有限公司',updeteVip:'AA1231233135454',updeteVipName:'会员昵称昵称',updateTime:'2017-01-45'},
                {id:'11','img':'../img/u150.png',name:'图片2',sourceType:'站点资源库',updateShop:'KDHJJJEJEN',updateShopName:'上海名腾科技有限公司',updeteVip:'AA1231233135454',updeteVipName:'会员昵称昵称',updateTime:'2017-01-45'},
                {id:'12','img':'../img/u382.png',name:'图片1',sourceType:'站点资源库',updateShop:'KDHJJJEJEN',updateShopName:'上海名腾科技有限公司',updeteVip:'AA1231233135454',updeteVipName:'会员昵称昵称',updateTime:'2017-01-45'},
                {id:'13','img':'../img/POIdialog.png',name:'图片2',sourceType:'族蚂资源库',updateShop:'KDHJJJEJEN',updateShopName:'上海名腾科技有限公司',updeteVip:'AA1231233135454',updeteVipName:'会员昵称昵称',updateTime:'2017-01-45'},
                {id:'14','img':'../img/u150.png',name:'图片2',sourceType:'站点资源库',updateShop:'KDHJJJEJEN',updateShopName:'上海名腾科技有限公司',updeteVip:'AA1231233135454',updeteVipName:'会员昵称昵称',updateTime:'2017-01-45'},
                {id:'15','img':'../img/u382.png',name:'图片1',sourceType:'站点资源库',updateShop:'KDHJJJEJEN',updateShopName:'上海名腾科技有限公司',updeteVip:'AA1231233135454',updeteVipName:'会员昵称昵称',updateTime:'2017-01-45'},
                {id:'16','img':'../img/POIdialog.png',name:'图片2',sourceType:'族蚂资源库',updateShop:'KDHJJJEJEN',updateShopName:'上海名腾科技有限公司',updeteVip:'AA1231233135454',updeteVipName:'会员昵称昵称',updateTime:'2017-01-45'},
                {id:'17','img':'../img/u150.png',name:'图片2',sourceType:'站点资源库',updateShop:'KDHJJJEJEN',updateShopName:'上海名腾科技有限公司',updeteVip:'AA1231233135454',updeteVipName:'会员昵称昵称',updateTime:'2017-01-45'},
                {id:'18','img':'../img/u382.png',name:'图片1',sourceType:'站点资源库',updateShop:'KDHJJJEJEN',updateShopName:'上海名腾科技有限公司',updeteVip:'AA1231233135454',updeteVipName:'会员昵称昵称',updateTime:'2017-01-45'},
                {id:'19','img':'../img/POIdialog.png',name:'图片2',sourceType:'族蚂资源库',updateShop:'KDHJJJEJEN',updateShopName:'上海名腾科技有限公司',updeteVip:'AA1231233135454',updeteVipName:'会员昵称昵称',updateTime:'2017-01-45'},
                {id:'20','img':'../img/u150.png',name:'图片2',sourceType:'站点资源库',updateShop:'KDHJJJEJEN',updateShopName:'上海名腾科技有限公司',updeteVip:'AA1231233135454',updeteVipName:'会员昵称昵称',updateTime:'2017-01-45'},
            ],
            listDelte:[
            {id:'15','img':'../img/u382.png',name:'图片1',sourceType:'站点资源库',updateShop:'KDHJJJEJEN',updateShopName:'上海名腾科技有限公司',updeteVip:'AA1231233135454',updeteVipName:'会员昵称昵称',updateTime:'2017-01-45'},
                {id:'16','img':'../img/POIdialog.png',name:'图片2',sourceType:'族蚂资源库',updateShop:'KDHJJJEJEN',updateShopName:'上海名腾科技有限公司',updeteVip:'AA1231233135454',updeteVipName:'会员昵称昵称',updateTime:'2017-01-45'},
                {id:'17','img':'../img/u150.png',name:'图片2',sourceType:'站点资源库',updateShop:'KDHJJJEJEN',updateShopName:'上海名腾科技有限公司',updeteVip:'AA1231233135454',updeteVipName:'会员昵称昵称',updateTime:'2017-01-45'},
                {id:'18','img':'../img/u382.png',name:'图片1',sourceType:'站点资源库',updateShop:'KDHJJJEJEN',updateShopName:'上海名腾科技有限公司',updeteVip:'AA1231233135454',updeteVipName:'会员昵称昵称',updateTime:'2017-01-45'},
                {id:'19','img':'../img/POIdialog.png',name:'图片2',sourceType:'族蚂资源库',updateShop:'KDHJJJEJEN',updateShopName:'上海名腾科技有限公司',updeteVip:'AA1231233135454',updeteVipName:'会员昵称昵称',updateTime:'2017-01-45'},
                {id:'20','img':'../img/u150.png',name:'图片2',sourceType:'站点资源库',updateShop:'KDHJJJEJEN',updateShopName:'上海名腾科技有限公司',updeteVip:'AA1231233135454',updeteVipName:'会员昵称昵称',updateTime:'2017-01-45'},
            ],
            editIndex:-1,
            isNameSame:false,//名字是否相同
            isNameOut:false,//名字是否溢出
            def:'',
            imgDialogShow:false,//是否展示预览框
            previewIndex:-1,
           
            isShowOperation:false,//
            //isOperation:false,//
            addSourceDialogShow:false,//是否展示添加到免费图片资源库弹框
            sourceDialogList:[
                {'name':'生活',value:0},
                {'name':' 美容-健康',value:0},
                {'name':' 园艺-户外',value:0},
                {'name':' 饮食-蔬果',value:0},
                {'name':' 运动-休闲',value:0},
                {'name':' 商务',value:0},
                {'name':' 建筑',value:0},
                {'name':'wang',value:0},
                {'name':'13211',value:0},
                {'name':'生活',value:0},
                {'name':'ere',value:0},
            ]
        },
        computed:{
            nowImgObj:function(){
                if(this.previewIndex>-1){
                    return this.list[this.previewIndex]
                }
            },
            isOperation:function(){
                 var some = this.list.some(function(v){
                     if(v.isChoose&&v.isChoose==true){
                        return true
                     }
                })
                return some
            },
            list: function(){
                if(this.currentTabbar==1){
                    return this.listHave
                }else{
                    return this.listDelte
                }
            }

           
        },
		created:function(){
			
		},
		mounted:function(){
			let that =this;
            document.addEventListener('click',that.bindClick)
        },
        watch:{
            previewIndex:function(nv,ov){
                console.log(nv,ov)
            },
        },
		methods:{
            delteImg:function(){//删除图片
                alert('调公共的弹框吧')
              
                let delteArr = this.getChooseList()
                console.log(delteArr,'删除的数组')
             
            },
            addSourceDialog:function(){//增加资源到资源库
                this.addSourceDialogShow = true
               
                console.log(this.getChooseList(),'>>>>>>>增加到资源库的数组')
                
            },
            getChooseList:function(){
             var nowArr = this.list.filter(function(item){
                    if(item.isChoose&&item.isChoose==true)
                    return item
                })
                return nowArr
           },
            closeSourceDialog:function(){//关闭资源到资源库弹框
                this.addSourceDialogShow = false
            },
            showOperation:function(){//展示选择操作方法
                this.isShowOperation=!this.isShowOperation
            },
            chooseList:function(item,index){ //选择图片
               
                let nowList = this.list[index];//
             
                nowList.isChoose= nowList.isChoose&&nowList.isChoose == true?false:true;
              
                this.$set(this.list,index,nowList)
               
            },

            prePageGo:function(){//上一张图
                if(this.previewIndex>0){
                    this.previewIndex--
                }
            },
            nextPageGo:function(){//下一张图
                if(this.previewIndex<this.list.length-1){
                    this.previewIndex++
                }
            },
            closeIcon:function(){
                this.imgDialogShow = false;
            },
            openImgDialog:function(index){
                this.imgDialogShow = true;
                this.previewIndex = index;
            },
            delet:function(index){//删除
                this.list.splice(index,1)
            },
			chooseTab:function(type){
                this.currentTabbar = type;
                //console.log(this.currentTabbar)
            },
            editName:function(index){
                this.editIndex = index
                this.$nextTick(function(){
                    this.$refs.inputs[index].focus()
                })
                
            },
            inputImgName:function(event){
                this.isNameOut = false;
                let nowValue = event.target.value;
              
                let nowLength =  this.gblen(nowValue);
                
                if(nowLength >50){
                    event.target.value=this.def;
                    this.isNameOut = true;
                }else{
                    this.def=event.target.value
                }
            },
            blurInputName:function(index){
                this.editIndex=-1;
                this.isNameOut = false;
                console.log(this.$refs.inputs[index].value,'inputs')
                let nowValue = this.$refs.inputs[index].value;
                console.log(this.gblen(nowValue),'长度')
                //失焦检查是否重名
                //失焦检验字数是否超过了50个字符
                if(this.gblen(nowValue)>50){
                    this.isNameOut = true;
                }
                if(!this.isNameOut&&!this.isNameSame){//如果没有重名并且没有超过字数 则失焦保存

                }
            },
            gblen:function(str) {   
                var len = 0;
                for (var i = 0; i < str.length; i++) {
                    if (str.charCodeAt(i) > 127 || str.charCodeAt(i) == 94) {
                        len += 2;
                    } else {
                        len++;
                    }
                }
                return len;
            },
            bindClick:function(e){
               
               let moniSelect = document.getElementById('moniSelect')
               if(moniSelect&&!moniSelect.contains(e.target)){
                   this.isShowOperation = false;
               }       
         },
		}
			
		
	})
</script>
</html>